import React from "react";
import Header from "./component/header";
import Searchbar from './component/SearchBar'
import Bottom from "./component/bottom";
import Main from './component/main'
import img1 from '../img/index.png'
import Item from './component/item'
import './css/index.css'
const fruitNames = [
   {
    name:"纯天然新鲜水果",
    print:40,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p9.png',
    },
    {
    name:"纯天然新鲜水果",
    print:50,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p10.png',
    },
    {
    name:"纯天然新鲜水果",
    print:60,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p11.png',
    },
    {
    name:"纯天然新鲜水果",
    print:40,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p12.png',
    },
    {
    name:"纯天然新鲜水果",
    print:40,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p13.png',
    },
    {
    name:"纯天然新鲜水果",
    print:40,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p14.png',
    },
    {
    name:"纯天然新鲜水果",
    print:40,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p9.png',
    },
    {
    name:"纯天然新鲜水果",
    print:40,
    img:'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_1/p10.png',
    },
];
let name=[
    {title:'水果类',text:'新鲜水果，时令采摘'},
    {title:'蔬菜类',text:'新鲜蔬菜，时令采摘'},
    {title:'干果类',text:'香脆可口，自然烘干'},

]
let App=()=>{
    return (
        <>
            <div className="index">
                <Header></Header>
                <Searchbar></Searchbar>
                <div className="img1">
                    <img src={img1}/>
                </div>
               {
                name.map((item,index)=>{
                    return (
                        <div className="main" key={index}>
                        <div className="title">
                            <p>{item.title}</p>
                            <p>更多数据</p>
                        </div>
                        <div className="main-item">
                            <Main title={item}></Main>
                            <div className="item-box">
                            {
                                fruitNames.map((item,index)=>{
                                    return   <Item item={item}></Item>
                                })
                            }
                          
                            </div>
                        </div>
                    </div>
                    )
                })
               }
                <Bottom></Bottom>
            </div>
        </>
    )
}

export default App